<!--
 * @Description: 创建监测计划
 * @Author: qingyang
 * @Date: 2023-02-23 20:18:29
 * @LastEditors: qingyang
 * @LastEditTime: 2023-03-03 14:30:47
-->
<template>
  <CPageLayout class="inventory-detail-wrapper" :headerConfig="headerConfig">
    <template #headerRightBtn>
      <el-button @click="onCancel">返回</el-button>
      <el-button
        @click="goPrevious"
        :type="isReadOnly ? 'primary' : 'default'"
        v-if="currentStatus === 'EMISSION'"
        >上一步</el-button
      >
      <el-button
        @click="goNext"
        type="primary"
        v-if="currentStatus == 'BASE'"
        :loading="goNextLoading"
        >下一步</el-button
      >
      <el-button
        @click="goCommit"
        type="primary"
        v-if="currentStatus == 'EMISSION' && !isReadOnly"
        :loading="commitLoading"
        >提 交</el-button
      >
    </template>
    <base-info
      ref="baseRef"
      v-show="currentStatus == 'BASE'"
      v-model:formData="formData"
      :inventoryNo="id"
      :isReadOnly="isReadOnly"
      :isCopyEdit="isCopyEdit"
      @updateAuditId="updateAuditId"
    ></base-info>
    <emission
      ref="emissionRef"
      v-if="currentStatus == 'EMISSION'"
      :inventoryNo="id"
      :organizationCode="formData.organizationCode"
      :isReadOnly="isReadOnly"
    ></emission>
  </CPageLayout>
</template>

<script lang="ts">
export default {
  name: 'Plan'
};
</script>
<script lang="ts" setup>
import { computed } from 'vue';
import BaseInfo from './components/BaseInfo/index.vue';
import Emission from './components/Emission/index.vue';
import { useSteps } from './useHooks';
import { CPageLayout, CPageHeaderComplexProps } from '@/components/CPageLayout';

const {
  headerTitle,
  id,
  currentStatus,
  formData,
  isReadOnly,
  goNextLoading,
  commitLoading,
  onCancel,
  goPrevious,
  goNext,
  goCommit,
  baseRef,
  emissionRef,
  isCopyEdit,
  updateAuditId
} = useSteps();

const headerConfig = computed<CPageHeaderComplexProps>(() => {
  return {
    title: headerTitle.value,
    size: 'small'
  };
});
</script>

<style lang="scss" scoped>
.inventory-detail-wrapper {
  :deep(.c-page-layout__body) {
    padding-bottom: 32px;
  }
}
</style>
